<template>
	<view class="login">
		<view class="phoneLogin">
			<text>+86</text>
			<view class="line"></view>
			<view class="loginInp">
				<input type="text" v-model="userNamePhone" placeholder="请输入新手机号" />
			</view>
		</view>
		<view class="getCode">
			<input type="text" placeholder="请输入验证码" v-model="usercodePhone" value="" />
			<button class="codeButn" type="primary" @tap="numberst" :disabled="countdown < 60 && countdown >= 1">
			{{countdown < 60 && countdown >= 1?`${countdown}秒重获`:'获取验证码'}}</button>
		</view>
	
		<view class="sendout">
			<button @click="loginButn()" type="default">确认</button>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				countdown:60,
				userNamePhone: '',// 手机号
				usercodePhone: '', // 验证码
				tips: '',
				userInfo: '',
				rules: {
					userNamePhone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					usercodePhone: {
						rule: /^[0-9]{4}$/,
						msg: "请输入4位数字验证码"
					}
				}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			...mapMutations(['login']),
			validate(key){
			  let bool = true;
			  if(!this.rules[key].rule.test(this[key])){
				  //提示信息
				  uni.showToast({
					  title:this.rules[key].msg,
					  duration: 2000,
					  icon: "none",
				  })
				  //取反
				  bool=false;
				  return false;
			  }
			  return bool;
			},
			numberst(e) {
				this.countDown();
			},
			countDown(){
				if(!this.validate('userNamePhone')) return;
				let self = this;
				self.countdown = 60;
				self.countdown -= 1;
				uni.showLoading({
					title: '正在获取验证码'
				})
				uni.request({
					url: this.baseurl+'index.php/api/Login/smsSend',
					method:'post',
					data:{
						mobile: this.userNamePhone
					},
					success: (res) => {
						if(res.data.code == '1') {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.hideLoading();
							uni.showToast({
								  title: res.data.msg,
								  duration: 2000,
								  icon: "none",
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								  title: '发送失败，请稍后再试',
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
				if(self.clear){
					clearInterval(self.clear)
				}
				self.clear = null;
				self.clear = setInterval(_ => {
					if(self.countdown > 0){
						self.countdown -= 1;
					}else{
						clearInterval(self.clear)
					}
				},1000)
			},
			  change(e) {
				console.log('change', e);
			  },
			loginButn() {
				if(!this.validate('userNamePhone')) return;
				if(!this.validate("usercodePhone"))  return;
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: this.baseurl+'index.php/api/index/updateUserInfo',
					method:'post',
					data:{
						mobile: this.userNamePhone,
						code: this.usercodePhone
					},
					header:{
						'token': this.userInfo.token
					},
					success: (res) => {
						if(res.data.code == '1') {
							uni.hideLoading()
							// let userInfo = {
							// 	userName: res.data.data.userinfo.nickname,
							// 	token: res.data.data.userinfo.token,
							// 	avatar: res.data.data.userinfo.avatar,
							// 	user_id: res.data.data.userinfo.user_id,
							// }
							this.login(userInfo)
							uni.switchTab({
							    url: "../personal"
							})
							uni.showToast({
								  title: res.msg,
								  duration: 2000,
								  icon: "none",
							})
						} else {
							uni.showToast({
								  title: res.msg,
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
			}	  		  
		}
	}
</script>

<style scoped lang="scss">
	.login {
		height: 100%;
		padding: 200rpx 72rpx 0 72rpx;
		.loginCode {
			font-size: 42rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 60rpx;
			padding: 118rpx 0 80rpx 0;
		}
		.phone {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}
		.phoneLogin {
			display: flex;
			padding: 44rpx 0 22rpx 0;
			border-bottom: 2rpx solid #979797;
			text {
				display: block;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				padding-top: 6rpx;
			}
			.line {
				height: 54rpx;
				border: 2rpx solid #979797;
				margin-left: 38rpx;
			}
		}
		.loginInp {
			padding: 6rpx 0;
			margin-left: 38rpx;
			input {
				height: 44rpx;
				color: #333333;
			}
		}
		.sendout {
			padding: 60rpx 0;
			button {
				height: 90rpx;
				line-height: 90rpx;
				color: #FFFFFF;
				background-color: rgb(242, 95, 95);
			}
		}
		.agreement {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.3);
			line-height: 34rpx;
			text-align: center;
			.nameAgreement {
				color: #F25F5F;
			}
		}
		.getCode {
			display: flex;
			padding: 41rpx 0 22rpx 0;
			border-bottom: 2rpx solid #979797;
			/deep/ uni-input {
				height: 90rpx !important;
			}
			.codeButn {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				background-color: #007aff !important;
			}
		}
	}
	/deep/ .u-demo-block__content {
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #979797;
	}
	/deep/ .u-input__content__subfix-icon .u-button {
		height: 70rpx !important;
	}
	/deep/ .u-border {
		border: 0 !important;
	}
</style>
